<template>
  <section>
    <el-form-item :label="'纬度视图 ('+value.values.length+'/'+value.maxfacts+')'" required>
      <draggable :list="value.values" :animation="340" group="selectItem" handle=".option-drag">
        <div v-for="(item, index) in value.values" :key="index" class="select-item">
          <div class="select-line-icon option-drag">
            <i class="el-icon-s-operation" />
          </div>
          <div class="xp-div-input" @click="control_clickItem(index)">{{item.name}}</div>
          <div class="close-btn select-line-icon" @click="value.values.splice(index, 1)">
            <i class="el-icon-remove-outline" />
          </div>
        </div>
      </draggable>
      <div style="margin-left: 20px;" v-if="value.values.length<value.maxfacts">
        <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addSelectItem">
          添加选项
        </el-button>
      </div>
    </el-form-item>
    <el-dialog title="提示" :visible.sync="dialogControl.visible" width="30%" :before-close="handleClose">
      <el-form ref="itemform" :model="dialogControl.form" :rules="dialogControl.rules" label-position="top">
        <el-form-item label="经度名称" required prop="name">
          <el-input v-model="dialogControl.form.name"></el-input>
        </el-form-item>
        <el-form-item label="经度视图SQL" required prop="sql">
          <el-input v-model="dialogControl.form.sql" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="显示类型" required prop="type">
          <el-select v-model="dialogControl.form.type" placeholder="请选择">
            <el-option value="bar" label="柱状图"></el-option>
            <el-option value="line" label="线条"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogControl.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogControl_submit">确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
  export default {
    props: {
      value: {
        type: Object,
        default: null
      },
    },
    data() {
      return {
        sp: {},
        sr: {},
        dialogControl: {
          visible: false,
          index: null,
          form: {
            name: null,
            sql: null,
            type: null,
          },
          rules: {
            name: [{
              required: true,
              message: '请输入',
              trigger: 'blur'
            }],
            sql: [{
              required: true,
              message: '请输入',
              trigger: 'blur'
            }],
            type: [{
              required: true,
              message: '请输入',
              trigger: 'blur'
            }],
          }
        },
        param: {}
      }
    },
    created(options) {
      let that = this;
      that.xinit();
    },
    methods: {
      xinit() {
        let that = this;
      },
      addSelectItem() {
        this.value.values.push({
          label: '',
          value: ''
        })
      },
      control_clickItem(index) {
        let that = this;
        let data = that.value.values[index];
        that.dialogControl.form = {
          name: data.name,
          type: data.type,
          sql: data.sql
        }
        that.dialogControl.index = index;
        that.dialogControl.visible = true;
      },
      dialogControl_submit() {
        let that = this;
        that.$refs["itemform"].validate((valid) => {
          console.log(valid);
          if (valid) {
            let form = that.dialogControl.form;
            let index = that.dialogControl.index;
            that.$set(that.value.values, index, {
              name: form.name,
              type: form.type,
              sql: form.sql
            });
            that.dialogControl.visible = false;
          }
        });
      },
    }
  }
</script>

<style>
  .xp-div-input {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 30px;
    line-height: 30px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
  }
</style>
